<template>
  <div>
    <button @click="add">add</button>
    <button @click="modify">modify</button>
    <p>{{ arr }}</p>
    <p>{{ arr2 }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    arr: [{ label: 'A' }, { label: 'B' }, { label: 'C' }],
    arr2: [{ label: 'a' }, { label: 'b' }, { label: 'c' }]
  }),
  watch: {
    // 侦听器
    arr(oldVal, newVal) {
      console.log('arr 发生变化')
    },
    // 侦听器 完整写法
    arr2: {
      immediate: false, // 组件被加载时，立即执行一次 handler
      deep: true, // 深度监听
      handler(oldVal, newVal) {
        console.log('arr2 发生变化')
      }
    }
  },
  methods: {
    add() {
      this.arr.push({ label: 'D' })
      this.arr2.push({ label: 'd' })
    },
    modify() {
      this.arr[0].label += 'A'
      this.arr2[0].label += 'a'
    }
  }
}
</script>
